<template>
	<view>
		<uni-swipe-action>
			<uni-swipe-action-item :auto-close="false" v-for="item in cart" :key="item.id">
				<view class="cart-item">
					<checkbox :checked="item.isChecked" class="checkbox" @click="handleChecked(item.id)"></checkbox>
					<image class="pic" :src="item.pic"></image>
					<view class="cart-right">
						<view class="name">{{ item.name }}</view>
						<view class="cart-cont">
							<view class="price">¥ {{ item.price }}</view>
							
							<uni-number-box v-model="item.num" :min="1" @change="(value) => changeValue(value, item.id)" />
						</view>
					</view>
				</view>
				
				<template v-slot:right>
					<view class="slot-button" @click="bindClick(item.id)">
						<text class="slot-button-text">删除</text>
					</view>
				</template>
		
			</uni-swipe-action-item>
		</uni-swipe-action>
				
		
		<view class="tool">
			<checkbox :checked="isCheckedAll" @click="handleAllSelect"></checkbox>
			<view>总价：¥{{ totalMoney }}</view>
			
			<button @click="delChecked">选中删除</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCheckedAll: false
			};
		},
		computed: {
			cart() {
				return this.$store.state.cart;
			},
			totalMoney() {
				let total = 0;
				this.cart.forEach((item) => {
					if (item.isChecked) {
						total += item.price * item.num
					}
				});
				return total;
			}
		},
		methods: {
			// 单选
			handleChecked(id) {
				this.$store.commit('changeChecked', id);
				this.changeIsCheckedAll();
			},
              // 修改数量
			changeValue(value, id) {
				this.$store.commit('changeNum', { id, num: value });
			},
			// 全选/反选
			handleAllSelect() {
				this.isCheckedAll = !this.isCheckedAll;
				this.$store.commit('changeAllChecked', this.isCheckedAll);
			},
			changeIsCheckedAll() {
				this.isCheckedAll = this.cart.every(item => item.isChecked);
			},
			// 删除所选
			delChecked() {
				let hasChecked = this.cart.some(item => item.isChecked);
				if(!hasChecked) {
					uni.showToast({
						title: '请先选择商品'
					});
				} else {
					this.$store.commit('deleteGoods');
				}
				this.changeIsCheckedAll()
			},
			// 删除单个
			bindClick(id) {
				console.log(id, 'id');
			}
		}
	}
</script>

<style lang="scss" scoped>
.cart-item {
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	border-bottom: 2rpx solid #ccc;
	font-size: 24rpx;
	.checkbox {
		align-self: center;
		border-radius: 50%;
	}
	.pic {
		flex-shrink: 0;
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}
	.cart-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.cart-cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.price {
			font-weight: bold;
			color: #c00;
		}
	}
}
.slot-button {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 20rpx;
	background-color: #c00;
	color: #fff;
	font-size: 26rpx;
	border-radius: 0 0 16rpx 0;
}
.tool {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: #fff;
	box-sizing: border-box;
	padding: 0 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	button {
		padding: 20rpx;
		margin: 0;
		line-height: normal;
		font-size: 28rpx;
	}
}
</style>
